<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

    <!-- 
        data与el的2种写法
        1.el有2种写法
            (1). new Vue的时候配置el属性
            (2). 先创建Vue实例, 随后通过vm.$mount('#root')指定el的值
        
        2.data有2种写法
            (1).对象式
            (2).函数式
            如何选择: 目前哪种写法都可以,以后学到vue组件中,必须使用函数式,否则会报错
        3.一个重要的原则
            由Vue管理的函数,一定不要写箭头函数, 一旦写了箭头函数, this就不再是Vue实例了
     -->


    <div id="root">
        <h1>你好, {{name}}</h1>
    </div>

    <script>
    //   const v = new Vue({
    //         // el: '#root',
    //         data: {
    //             name: '尚硅谷'
    //         }
    //     })
    //     console.log(v)
    //     // v.$mount('#root')
    //     // 第二种写法更加灵活
    //     setTimeout(function(){
    //         v.$mount('#root')
    //     },1000)

        // data的两种写法
        new Vue({
            el: '#root',
            // data的第一种写法:对象式
            // data: {

            // }
            // data的第二种写法: 函数式
            //组件必须使用函数式
            // data: function () {
                data(){
                // data()=>,data不能写成箭头函数,箭头函数没有自己的this，向外找,这里的this指的是全局window
                console.log('@@@',this) //这里this是Vue实例对象
                return {
                    name: '尚硅谷'
                }
            }
        })

    </script>
</body>
</html>